<template>
  <div>
    <div class="box-list">
      <div class="boxItem">
        <div class="boxtitle">
          阅读次数
        </div>
        <div class="content">
          385
        </div>
      </div>
      <div class="boxItem">
        <div class="boxtitle">
          平均学习时长
        </div>
        <div class="content">
          70秒
        </div>
      </div>
      <div class="boxItem">
        <div class="boxtitle">
          答题准确率
        </div>
        <div class="content">
          72.6%
        </div>
      </div>
      <div class="boxItem">
        <div class="boxtitle">
          常见学习时间点
        </div>
        <div class="content">
          9:03
        </div>
      </div>
      <div class="boxItem">
        <div class="boxtitle">
          薄弱点
        </div>
        <div class="content">
          创新改革相关
        </div>
      </div>
      <div class="boxItem">
        <div class="boxtitle">
          学习积极性评分
        </div>
        <div class="content">
          97
        </div>
      </div>
      <div class="boxItem">
        <div class="boxtitle">
          学习效果评分
        </div>
        <div class="content">
          88
        </div>
      </div>
    </div>
    <div style="display: flex">
    <div class="zd">
      <div class="zdtitle">指导意见</div>
      <div class="content">
        <ul>
          <li>加强【创新改革相关】相关内容学习</li>
          <li>加强【人才强企】相关内容学习</li>
          <li>加强【人才强企】相关内容学习</li>
          <li>加强【党建工作】相关内容学习</li>
          <li>可能出现由于答题时长过短导致的审题不仔细，需要改进</li>
          <li>积分同比同部门同事处于中游</li>
          <li>积分总量在全省位于中游</li>
        </ul>
      </div>
    </div>
      <div>
        <img src="../../assets/common/bar.png"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  }
}
</script>
<style scoped>
.box-list{
  display: flex;
  flex-wrap: wrap;

}
.box-list .boxtitle{
  font-weight: bold;
  font-size: 16px;
}
.boxItem{
  padding: 15px;
  margin-left: 50px;
  margin-top: 25px;
  width: 175px;
  border-radius: 3px;
  height: 75px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #bfcfdf;
}
.boxItem .content{
  line-height: 35px;
}
.zd{
  margin-top: 50px;
  margin-left: 50px;
}
.zd ul li{
  height: 30px;
}
.zdtitle{
  font-size: 18px;
  font-weight: bold;
}
.zd .content{
  color: darkred;
}
</style>
